<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>07_智能表单控件</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;z-index: 9999;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1>07_智能表单控件</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、新的输入型控件type类型</h4>
			<p>
				email  :  电子邮箱文本框，跟普通的没什么区别,当输入不是邮箱的时候，验证通不过（移动端会有英文键盘）
				
				tel   :   电话号码（移动端会有数字键盘）

				url   :   网页的URL（得带上http:）

				search  :  搜索引擎,chrome下输入文字后，会多出一个关闭的X
				
				range  :  特定范围内的【数值】选择器 / min、max、step( 步数 ) value位置

				number  :  只能包含数字的输入框

				color  :  颜色选择器

				datetime  :  显示完整日期 / 显示世界标准完整日期时间（带有 calendar 和 time 控件）

				datetime-local  :  显示完整日期，不含时区 / 显示年月日（带有 calendar 控件）

				time  :  显示时间，不含时区 / 定义日期字段的时、分（带有 time 控件）

				date  :    显示日期

				week  :  显示周

				month  :  显示月
			</p>
			<h4>二、input中的新属性</h4>
			<p>
				placeholder  :  输入框提示信息 / 例子 :  微博的密码框提示
				
				autocomplete  :  是否保存用户输入值 / 默认为on，关闭提示选择off / input 中需要知道name属性 

					例：
						&#60;form action="demo_form.asp" method="get" autocomplete="on"&gt;
						  First name:&#60;input type="text"  /&gt;
						  E-mail: &#60;input type="email" autocomplete="off" /&gt;  
						&#60;/form&gt;

				autofocus  :  指定表单获取输入焦点 true

				list和datalist  :  为输入框构造一个选择列表 / list值为datalist标签的id
				
				required  :  此项必填，不能为空

				Pattern : 正则验证  pattern="\d{1,5}“

				Formaction 在submit里定义提交地址	

					例:
						Formaction 	在submit里定义提交地址
							&#60;button type="submit" formaction="demo_admin.asp"&gt;

						&#60;keygen&gt;给表单添加一个公钥
							&#60;form action="http://www.baidu.com" method="get"&gt;
								用户: &#60;input type="text" name="usr_name" /&gt;
								公钥: &#60;keygen name="security" /&gt;
									  &#60;input type="submit" /&gt;
							&#60;/form&gt;
			</p>
			<h4>三、Forms</h4>
			<p>
				表单验证
				通过监听'invalid'事件，下的this.validity

				oInput.addEventListener('invalid',fn,false);
				function fn(){
					alert(this.validity.valid);
					ev.preventDefault();
				}

				valueMissing  :  	required 是否为空（空为true）;
				typeMismatch :  	控件值与预期类型不匹配，是返回true;
				patternMismatch  :  	输入值不满足pattern正则，是返回true;
				tooLong  :  	超过maxLength最大限制，是返回true;
				rangeUnderflow : 	验证的range最小值
				rangeOverflow：	验证的range最大值
				stepMismatch: 	验证range 的当前值 是否符合min、max及step的规则
				customError 	不符合自定义验证
					》》setCustomValidity(); 自定义验证

				validity对象，下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
				
				表单验证
				Invalid事件  :  	验证反馈 input.addEventListener('invalid',fn,false)
				阻止默认验证：	ev.preventDefault()
				formnovalidate属性  :  关闭验证
			</p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/1-表单元素.html" target="case"></a>
			<a href="case/2-tel.html" target="case"></a>
			<a href="case/3-url.html" target="case"></a>
			<a href="case/4-search.html" target="case"></a>
			<a href="case/5-range.html" target="case"></a>
			<a href="case/6-number.html" target="case"></a>
			<a href="case/7-color.html" target="case"></a>
			<a href="case/8-日期.html" target="case"></a>
			<a href="case/9-placeholder.html" target="case"></a>
			<a href="case/10-autocomplete.html" target="case"></a>
			<a href="case/11-list.html" target="case"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example' charset='gbk'>
		(function(){
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[1]);
			}
			console.log(decodeURI(oCase[0].href));
		})();
	</script>
</body>
</html>